<template>
  <div style="height: 100%; position: relative">
    <headerNav />
    <div
      class="section"
      :style="{ backgroundImage: 'url(' + joinPlanebg + ')' }"
    >
      <div class="headertext">关于星球</div>
      <div class="maintext">
        快乐星球是一个去中心化的网络虚拟元宇宙社区，您在这里可以工作，可以社交丶可以购物，可以创业。可以玩游戏，可以做您现实生活中所有可以在网络上做的事情，同时还能做您在现实生活中不能做的事情。他就是您的另一个生活的控件。您是星球的公民，您在这里也有您的星球生命和资产，您在星球的生命财产都将得到星球的保障。
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "./headerNav.vue";
export default {
  components: {
    headerNav,
  },
  data() {
    return {
      joinPlanebg: require("@/assets/img/关于星球bg.png"),
    };
  },
};
</script>

<style lang="less" scoped>
.section {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  touch-action: none;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 700ms ease 0s;
}
.headertext {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  padding-top: 15%;
  padding-left: 10%;
}
.maintext {
  color: #c0c4cc;
  font-size: 20px;
  padding-left: 10%;
  padding-right: 10%;
  // width: 75%;
  line-height: 45px;
  margin-top: 25px;
}

@media (max-width: 992px) {
  .section {
    background-size: cover;
    background-position: center;
  }

  .maintext {
    line-height: 35px;
  }
}

@media (max-width: 576px) {
  .section {
    background-size: cover;
    background-position: center;
  }

  .maintext {
    line-height: 35px;
  }
}
</style>
